<template>
    <div>
        <div ref="express" class="express">
            <ul class="row-ul"  v-if="type == '海外圆通A'">
                <li class="express-compony">
                    <div>
                        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1557035090031&di=1956dda07d1846ed8f486f978eae19a1&imgtype=0&src=http%3A%2F%2Ffileihr.zhaopin.com%2F062%2F141%2F062141673%2Flogo%2Fee1276b8-a51c-40da-a849-956a7d25cf63.png">
                    </div>
                    <div class="money">代收货款：¥ {{expressDetail.agencyFund}}</div>
                    <div class="text">代收货款</div>
                </li>
                <li class="sections-code">
                    {{expressDetail.shortAddress}}
                </li>
                <li class="express-area">
                    <div class="region">区域件</div>
                    <div class="barcode">
                        <img id="barcode">
                    </div>
                </li>
                <li class="express-address">
                    <div>收</div>
                    <div class="address">
                        <div>
                            <span>{{expressDetail.receiver_name}}</span>&nbsp;
                            <span>{{expressDetail.mobile}}</span>&nbsp;
                            <!--<span>0517-80288088</span>-->
                        </div>
                        <p>{{expressDetail.receiver_province}}{{expressDetail.receiver_city}}{{expressDetail.receiver_street}}{{expressDetail.receiver_address}}</p>
                    </div>
                </li>
                <li class="express-post">
                    <div>寄</div>
                    <!--<div class="address">-->
                        <!--<div>-->
                            <!--<span>花花公子官方旗舰店</span>&nbsp;-->
                            <!--<span>18511266425</span>-->
                        <!--</div>-->
                        <!--<p>黑龙江省齐齐哈尔市建华区文化大街42号齐齐哈尔大学计算机工程学院计算机001班</p>-->
                    <!--</div>-->
                </li>
                <li class="note-barcode">
                    <img id="note-barcode">
                </li>
                <li class="express-time">
                    <div>
                        <p class="date">{{expressDetail.date}}</p>
                        <!--<p class="time">14:31:01</p>-->
                        <p class="printTime">打印时间</p>
                        <p class="start">始发网点</p>
                    </div>
                    <div class="qrcode">
                        <img :src="qrcodeImg" alt="" class="qrcodeImg">
                    </div>
                    <div class="sign">
                        <p>快件送达收件人地址，经收件人或收件人（寄件人），允许的代收人签字，视为送达。您的签字代表您已验收此包裹，并已确认商品信息无误、包装完好、没有划痕、破损等表面质量问题</p>
                        <div>签收栏<i class="el-icon-edit"></i></div>
                    </div>
                </li>
                <li class="express-barcode">
                    <div class="logo">
                        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1557035090031&di=1956dda07d1846ed8f486f978eae19a1&imgtype=0&src=http%3A%2F%2Ffileihr.zhaopin.com%2F062%2F141%2F062141673%2Flogo%2Fee1276b8-a51c-40da-a849-956a7d25cf63.png"
                             alt="">
                    </div>
                    <div class="qrcode">
                        <img id="note-barcode">
                    </div>
                </li>
                <li class="put-address">
                    <div>收</div>
                    <div class="address">
                        <div>
                            <span>{{expressDetail.receiver_name}}</span>&nbsp;
                            <span>{{expressDetail.mobile}}</span>&nbsp;
                            <!--<span>0517-80288088</span>-->
                        </div>
                        <p>{{expressDetail.receiver_province}}{{expressDetail.receiver_city}}{{expressDetail.receiver_street}}{{expressDetail.receiver_address}}</p>
                    </div>
                </li>
                <li class="post-address">
                    <div>寄</div>
                    <!--<div class="address">-->
                        <!--<div>-->
                            <!--<span>花花公子官方旗舰店</span>&nbsp;-->
                            <!--<span>18511266425</span>-->
                        <!--</div>-->
                        <!--<p>黑龙江省齐齐哈尔市建华区文化大街42号齐齐哈尔大学计算机工程学院计算机001班</p>-->
                    <!--</div>-->
                </li>
                <li class="custom">

                </li>
                <li class="express-orderNo">
                    <div>
                        订单号：{{expressDetail.orderNo}}
                    </div>
                    <div>
                        {{expressDetail.mobile}}
                    </div>
                </li>

            </ul>
            <img :src="labelUrls" alt="">
        </div>
        <div class="btn" style="text-align: center;margin-top: 16px;">
            <el-button type="primary" @click="print">打印</el-button>
        </div>
    </div>
</template>

<script type='text/ecmascript-6'>
  import api from "@/api/orderDeliverItem.service.js";
  import {formatDate} from '@/utils/index.js'
  import JsBarcode from 'jsbarcode';
  import jrQrcode from "jr-qrcode";

  export default {
    components: {},
    data() {
      return {
        labelUrls: "",
        form: {},
        qrcodeImg: null,
        expressDetail: {
          agencyFund: 300, // 代收金额
          insuranceValue: 20, // 保价金额
          originateOrgCode: 123456, // 始发网点代码
          itemName: '商品自定义区',
          remark: '备注',
          shortAddress: '100-200-30-400', // 三段码
          packageCenterCode: 123456789, // 揽收目的地条形码
          mailNo: 'YT2000012345608', // 运单条形码
          obj: {

          }
        }
      };
    },
    mounted() {
      this.getDetail()
    },
    computed: {
      type() {
        return this.$route.query.type
      }
    },
    methods: {
      print() {
        this.$set(this.expressDetail, 'date', formatDate())
        this.$nextTick(() => {
          this.$print(this.$refs.express)
        })
      },
      barCodeInit() {
        JsBarcode("#barcode", this.expressDetail.packageCenterCode, {
          format: "CODE128",//选择要使用的条形码类型               
          displayValue: false,//是否在条形码下方显示文字               
          textPosition: "bottom"//设置文本的垂直位置           
        })
        JsBarcode("#note-barcode", this.expressDetail.mailNo, {
          format: "CODE128",//选择要使用的条形码类型
          text: this.expressDetail.mailNo,//                
          displayValue: true,//是否在条形码下方显示文字               
          textPosition: "bottom"//设置文本的垂直位置           
        })
        this.qrcodeImg = jrQrcode.getQrBase64(this.expressDetail.qrCode)
      },
      getDetail() {
        if (this.type == '海外圆通A') {
          api.getAPrintData([this.$route.query.id]).then(res => {
            this.expressDetail = res.value[0]
            this.barCodeInit()
          })
        } else if (this.type == '海外圆通B') {
          api.getBPrintData([this.$route.query.id]).then(res => {
            this.labelUrls = res.value[0].labelUrls
          })
        }
      }
    }
  };
</script>

<style rel="stylesheet/scss" lang='scss' scoped>
    p {
        margin: 0;
    }
    .express {
        width: 100mm;
        /*height: 150mm;*/
        background-color: #fff;
        margin: 0 auto;
        .row-ul {
            border: 1px dashed #000;
            width: 100%;
            display: grid;
            grid-template-columns: 100%;
            grid-template-rows: 14mm 15mm 10mm 15mm 13mm 23mm 21mm 10mm 10mm 10mm 35mm 5mm;
            .express-compony {
                padding-left: 9pt;
                height: 100%;
                display: grid;
                align-items: center;
                grid-template-columns: 30% 53% 17%;
                img {
                    width: 100%;
                }
                .money {
                    text-align: right;
                    font-size: 7pt;
                    padding: 0 10px;
                }
                .text {
                    font-size: 16pt;
                    color: #fff;
                    text-align: center;
                    line-height: 26px;
                    background-color: #000;
                }
            }
            .sections-code {
                font-size: 30pt;
                text-align: center;
            }
            .express-area {
                height: 100%;
                display: grid;
                align-items: center;
                padding: 0 9pt;
                grid-template-columns: 50% 50%;
                .region {
                    text-align: left;
                    font-size: 7pt;
                }
                .barcode {
                    text-align: right;
                    img {
                        height: 9mm;
                        width: 80%;
                    }
                }
            }
            .express-address,.express-post {
                height: 100%;
                display: grid;
                align-items: center;
                text-align: center;
                grid-template-columns: 9% 91%;
                .address {
                    text-align: left;
                    font-size: 10pt;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    p {
                        word-wrap: break-word;
                    }
                }
            }
            .express-post {
                .address {
                    font-size: 8pt;
                    line-height: 11pt;
                }
            }
            .note-barcode {
                text-align: center;
                img {
                    height: 22mm;
                    width: 90%;
                }
            }
            .express-time {
                display: grid;
                grid-template-columns: 20% 20% 60%;
                overflow: hidden;
                > div {
                    font-size: 10pt;
                    border-right: 1px solid #000;

                    &:first-of-type {
                        line-height: 12pt;
                        text-align: center;
                    }
                }
                .qrcode {
                    padding: 3pt;
                    img {
                        width: 100%;
                    }
                }
                .sign {
                    border-right: none;
                    text-align: left;
                    font-size: 9pt;
                    p {
                        line-height: 1;
                        padding: 1pt;
                    }
                    div {
                        text-align: right;
                        padding-right: 10pt;
                    }
                }
            }
            .express-barcode {
                padding-left:8pt;
                height: 100%;
                display: grid;
                align-items: center;
                grid-template-columns: 30% 70%;
                .logo {
                    text-align: left;
                    img {
                        width: 24mm;
                        height: 8mm;
                    }
                }
                .qrcode {
                    text-align: right;
                    img {
                        width: 60mm;
                        height: 8mm;
                    }
                }
            }
            .put-address,.post-address {
                align-items: center;
                height: 100%;
                display: grid;
                grid-template-columns: 9% 71%;
                font-size: 8pt;
                text-align: center;
                .address {
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    word-wrap: break-word;
                    text-align: left;
                    line-height: 1;
                    /*transform: scale(0.9);*/
                }
            }
            .custom {
                padding: 2pt 9pt;
                text-align: left;
            }
            .express-orderNo {
                padding: 0 9pt;
                height: 100%;
                display: grid;
                grid-template-columns: auto auto;
                div {
                    text-align: left;
                    &:last-of-type {
                        text-align: right;
                    }
                }
            }
            > li {
                border-bottom: 1px solid #000;
                &:last-of-type {
                    border: none;
                }
            }
        }
    }
</style>
